<template>
  <cs-container :is-back-to-top="true">
    <router-view />
    <el-row :gutter="20" v-if="show">
      <el-col :span="5">
        <cs-tree
          :treeData="treeData"
          :title="treeTitle"
          :isFalseButton="isFalseButton"
          :showTitle="true"
          :showAdd="true"
          :addText="addText"
          @handleTree="handleTree"
          @handleNodeClick="handleNodeClick"
          @handleGroupDelete="handleGroupDelete"
          @handleTitle="handleTitle"
          ref="tree"/>
      </el-col>
      <el-col :span="19">
        <p class="asstes_p">资产状态：
          <span>资产数({{this.total}})</span>
          <span>24小时攻击入侵(0)</span>
          <span>24小时安全警告(0)</span></p>
        <!-- button按钮组 -->
        <div class="button_group">
          <el-button-group>
            <el-button
              type="primary"
              icon="el-icon-circle-plus"
              size="mini"
              @click="addAssetsDialog"
              :disabled="disabledadd">新增</el-button>
            <el-button
              type="primary"
              icon="el-icon-delete-solid"
              size="mini"
              @click="delAllData"
              :disabled="this.ids.length === 0">删除</el-button>
          </el-button-group>
          <el-button-group>
            <el-button
              type="primary"
              icon="el-icon-rank"
              size="mini"
              @click="removeAssets"
              :disabled="this.ids.length === 0">移动资产</el-button>
            <el-button
              type="primary"
              icon="el-icon-s-promotion"
              size="mini">导出资产</el-button>
            <el-popover
              placement="right"
              width="320"
              v-model="visible">
              <p v-for="(item, i) in setTagsData"
                :key="i">
                <span class="span-tag">{{item.groupName}}</span>
                <el-tag
                  v-for="(item2, i) in item.assetsTagEntity"
                  :key="'tag-'+i"
                  @click="sTag(item2)"
                  :color="item2.color">{{item2.name}}</el-tag>
              </p>
              <!-- 选中的标签 -->
              <p>
                <el-tag
                  v-for="(item3, i) in selectedLabel"
                  :key="'t-'+i"
                  :color="item3.color">{{item3.name}}</el-tag>
              </p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                <el-button type="primary" size="mini" @click="setLabel">确定</el-button>
              </div>
              <el-button
                slot="reference"
                icon="el-icon-collection"
                size="mini"
                type="primary"
                @click="setTags"
                :disabled="this.ids.length === 0">设置标签</el-button>
            </el-popover>
          </el-button-group>
        </div>
        <!-- 表格区域 -->
        <cs-table :table-data="currentTableData"
                  :table-label="tableLabel"
                  @handleButton="handleButton"
                  @handleSortChange="handleSortChange"
                  @handleSelectionChange="handleSelectionChange"
                  :table-option="tableOption">
          <template slot="tag" slot-scope="scope">
            <el-tag type="mini"
              v-for='(items, index) in scope.row.assetsTagEntities'
              :key='index'
              :color="items.color">{{items.name}}</el-tag>
          </template>
        </cs-table>
        <!-- 分页区域 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[10, 15, 20, 30]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-col>
    </el-row>
    <!-- 新增、修改弹出框 -->
    <addOrUpDateDialog ref="addOrupDateDialog" @handleGroup="getAssetsList"></addOrUpDateDialog>
    <!-- 移动资产弹出框 -->
    <assetsRemoveDialog ref="assetsRemoveDialog" @assetsRemove="getAssetsData"></assetsRemoveDialog>
  </cs-container>
</template>

<script>
import util from '@/utils/util'
import {
  getAssetsGroupData,
  delAssetsItem,
  delAssetsItems,
  getAssetsGroupListData,
  deleteAssetsGroup,
  searchGroupById,
  inquireTag,
  settingTags
} from '@/api/assets/group.js'
import CsTable from '@/components/cs-table'
import CsTree from '@/components/cs-tree'
import addOrUpDateDialog from './components/groupAddOrupDate/addOrUpdataDialog.vue'
import assetsRemoveDialog from './components/assetsRemove/assetsremovedialig.vue'
export default {
  name: 'index1',
  data() {
    return {
      isFalseButton: true,
      currentTableData: [],
      tableLabel: [
        { label: '资产名称', param: 'name', align: 'center', sortable: true, isShow: true, width: '150' },
        { label: '资产IP', param: 'ipAddr', align: 'center', isShow: true },
        { label: '资产类型', param: 'assetsTypeName', align: 'center', sortable: false, isShow: true },
        { label: '资产组', param: 'assetsGroupName', align: 'center', sortable: false, isShow: true },
        { label: '资产标签', param: 'tag', align: 'center', sortable: false, slot: true, isShow: true, width: '180' }
      ],
      tableOption: {
        label: '操作',
        width: '200',
        options: [
          { label: '编辑', type: 'primary', icon: 'el-icon-edit', methods: 'audit', auth: 'sys:group:update' },
          { label: '删除', type: 'danger', icon: 'el-icon-delete', methods: 'delete', auth: 'sys:group:delete' }
        ]
      },
      treeTitle: '全部资产',
      addText: '新建组',
      treeData: [],
      // 分页参数
      pageNo: 1,
      pageSize: 10,
      total: 0,
      ids: [],
      show: true,
      val: {},
      disabledadd: false,
      Gid: '',
      visible: false,
      setTagsData: [],
      selectedLabel: []
    }
  },
  components: {
    CsTable,
    CsTree,
    addOrUpDateDialog,
    assetsRemoveDialog
  },
  watch: { // 监听路由变化
    $route(to, from) {
      const ThisPage = to.path
      if (ThisPage === '/module/assets/group') {
        this.show = true
        this.getAssetsData()
        this.getAssetsList()
      } else {
        this.show = false
      }
    }
  },
  created() {
    this.getAssetsList()
    this.getAssetsData()
  },
  methods: {
    // 获取全部资产
    getAssetsData() {
      getAssetsGroupData({ pageNo: this.pageNo, pageSize: this.pageSize }).then((res) => {
        this.total = res.data.totalRows
        this.currentTableData = res.data.rows
      })
      this.disabledadd = true
    },
    // 获取资产组数据
    getAssetsList() {
      getAssetsGroupListData().then((res) => {
        res.data.forEach(item => {
          item.label = item.groupName
        })
        this.treeData = util.formatDataToTree(res.data, 'id', 'pid')
      })
      this.disabledadd = true
    },
    // 监听分页区域
    handleSizeChange(newSize) {
      this.pageSize = newSize
      this.getAssetsData()
    },
    handleCurrentChange(newPage) {
      this.pageNo = newPage
      this.getAssetsData()
    },
    // 判断操作栏按钮
    handleButton(methods, row, index) {
      // 修改
      if (methods.methods === 'audit') {
        this.handleUpdate(methods.row)
      } else if (methods.methods === 'delete') { // 删除
        this.handleDelete(methods.index)
      }
    },
    // 排序
    handleSortChange() {
    },
    // 多选操作
    handleSelectionChange(val) {
      this.ids = val.map(item => {
        return item.id
      })
    },
    // 批量删除数据
    delAllData() {
      this.$confirm('确定要执行该操作吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      }).then(() => {
        delAssetsItems(this.ids).then((res) => {
          this.getAssetsData()
        })
      })
        .catch(() => {
        })
    },
    // 根据id单个删除
    handleDelete(index) {
      this.$confirm('确定要执行该操作吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      })
        .then(() => {
          delAssetsItem(this.currentTableData[index].id)
            .then((res) => {
              // this.currentTableData.splice(index, 1)
              this.getAssetsData()
            })
        })
        .catch(() => {
        })
    },
    // 编辑修改
    handleUpdate(row) {
      this.route(row, 2)
    },
    // 新增资产
    addAssetsDialog() {
      this.route(this.Gid, 1)
    },
    // 路由跳转
    route(val, type) {
      const routeList = this.$router.options.routes
      const currentRouter = this.$route.path
      const pRouter = currentRouter.slice(0, currentRouter.lastIndexOf('/'))
      const childRouter = currentRouter.slice(currentRouter.lastIndexOf('/') + 1)
      routeList.forEach(element => {
        if (pRouter === element.path) {
          if (element.children) {
            element.children.forEach(el => {
              if (el.path === childRouter) {
                el.children = []
                let router = {
                  path: 'addgroup',
                  name: 'addGroup'
                }
                router.component = resolve => require(['@/views/module/assets/group/components/addOrupdate/addgroup'], resolve)
                el.children.push(router)
              }
            })
          }
        }
      })
      this.$router.addRoutes(routeList)
      /* eslint-disable */
      this.$router.replace({ name: 'addGroup', path: '/module/assets/group/components/addOrupdate/addgroup', query: { val, type }})
    },
    // 资产组-树-的新增与修改
    handleTree(val) {
      this.$refs.addOrupDateDialog.init(val, true)
    },
    // 点击节点，获取对应数据
    handleNodeClick(val) {
      this.Gid = val.id
      const data = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        id: val.id
      }
      searchGroupById(data).then((res) => {
        this.currentTableData = res.data.rows
        this.total = res.data.totalRows
      })
      this.disabledadd = false
    },
    // 资产组删除
    handleGroupDelete(data) {
      this.$confirm('确定要执行该操作吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      }).then(() => {
        deleteAssetsGroup(data.id).then(() => {
          this.getAssetsList()
        })
      })
    },
    // 点击资产组标题
    handleTitle() {
      this.getAssetsList()
      this.getAssetsData()
    },
    // 移动资产
    removeAssets() {
      this.$refs.assetsRemoveDialog.init(this.treeData, this.ids, true)
    },
    // 设置标签
    setTags() {
      inquireTag().then((res) => {
        this.setTagsData = res.data
      })
    },
    sTag(val) {
      this.selectedLabel.push(val)
    },
    setLabel() {
      let tags = []
      tags = this.selectedLabel.map(item => {
        return item.id
      })
      const data = {
        ids: this.ids,
        tags: tags
      }
      settingTags(data).then((res) => {
        this.getAssetsData()
      })
      this.visible = false
      this.selectedLabel = []
    }
  }
}
</script>

<style scoped>
  .asstes_p{
    font-size: 14px;
    margin: 14px 0 10px 0;
  }
  .asstes_p span{
    margin: 0 10px 0 10px;
    cursor: pointer;
  }
  .button_group{
    margin-bottom: 10px;
  }
  .el-button-group{
    margin-right: 10px;
  }
  .cs-p{
    padding: 0 !important;
  }
  .el-pagination{
    margin-top: 10px;
  }
  .el-tag{
    color: #fff !important;
  }
  .el-row{
    margin: 0 !important;
  }
  .log-tree{
    margin: 20px 20px 20px 10px;
  }
  .el-col-18{
    padding-right: 20px !important;
  }
  .el-popover .el-tag {
    cursor: pointer;
  }
  .span-tag {
    margin-right: 5px;
  }
</style>
